<template>
  <router-view v-slot="slotProps">
    <keep-alive :include="includedComponents">
      <component :is="slotProps.Component"/>
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import { CACHE_INCLUDED_ROUTES } from "@/stores/conf";

export default {
  name: "RouteView",
  computed: {
    // FIX: 路由缓存问题，关闭了tab页时再打开就不刷新
    includedComponents(): any {
      const cache = this.$sessionCache;

      const includedRouters = cache.get(CACHE_INCLUDED_ROUTES)

      // 如果是缓存路由，则加入到 cache_included_routes
      if (this.$route.meta.keepAlive && this.$route.name) {
        let cacheRouterArray = cache.get(CACHE_INCLUDED_ROUTES) || [];
        if (!cacheRouterArray.includes(this.$route.name)) {
          cacheRouterArray.push(this.$route.name)
          cache.set(CACHE_INCLUDED_ROUTES, cacheRouterArray)

          return cacheRouterArray;
        }
      }
      return includedRouters;
    },

    keepAlive() {
      return this.$route.meta.keepAlive
    },

    routeKey() {
      return this.$route.name;
    }
  },
}
</script>
